<template>
  <div>
    <div style="margin-bottom:10px;">
      <el-cascader v-model="checkedTask" size="small" :options="options" @change="handleChange" />
      <div style="float:right;">
        <el-button type="danger" size="small">清除数据</el-button>
        <el-button type="primary" size="small">刷新</el-button>
        <el-button type="primary" size="small">导出数据</el-button>
      </div>
    </div>
    <el-table :data="gatherData" border max-height="450">
      <el-table-column
        v-for="(item,index) in comList"
        :key="item.id"
        :prop="item.field"
        :label="item.desc"
        :min-width="index === 0?300:150"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <div style="margin-top:10px;text-align:center;">
      <el-pagination :current-page="pageInfo.pageNo" :page-sizes="[ 20, 30, 40,50]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
import { PROJECT_API, MODEL_API } from '@/api/index'
export default {
  data() {
    return {
      checkedTask: ['1', '1-2'], // 选取的任务
      options: [],
      comList: [],
      gatherData: [],
      pageInfo: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tasklist: []
    }
  },
  mounted() {
    this.getProjectList()
  },
  methods: {
    // 获取任务列表
    getProjectList() {
      const info = { pageNo: 1, pageSize: 999 }
      PROJECT_API.getProjectList(info).then(res => {
        const data = res.data.data
        this.tasklist = res.data.data
        const group = []
        const groupIndex = []
        data.forEach(element => {
          if (groupIndex.indexOf(element.groupId) === -1) {
            groupIndex.push(element.groupId)
            group.push({ label: element.groupName, value: element.groupId, children: [] })
          }
          const index = groupIndex.indexOf(element.groupId)
          group[index].children.push({ label: element.name, value: element.id })
        })
        this.options = group
        this.checkedTask = [groupIndex[0], group[0].children[0].value]
        this.getDataOfProject(this.checkedTask[1])
        this.getModelFields(data[0].modelId)
      })
    },
    // 获取对应任务选取字段模板字段
    getModelFields(id) {
      MODEL_API.modelProperties(id).then(res => {
        this.comList = res.data
      })
    },
    // 获取任务数据
    getDataOfProject(id) {
      const info = _.cloneDeep(this.pageInfo)
      info.projectId = id
      PROJECT_API.getDataOfProject(info).then(res => {
        this.pageInfo.total = res.data.totalRows
        this.gatherData = res.data.data
      })
    },
    //   分页显示条数改变
    handleSizeChange(size) {
      this.pageInfo.pageSize = size
      this.getDataOfProject(this.checkedTask[1])
    },
    // 页码改变
    handleCurrentChange(page) {
      this.pageInfo.pageNo = page
      this.getDataOfProject(this.checkedTask[1])
    },
    // 选取任务
    handleChange(value) {
      const len = this.tasklist.length
      for (let i = 0; i < len; i++) {
        if (this.tasklist[i].id === value[1]) {
          this.getModelFields(this.tasklist[i].modelId)
          break
        }
      }
      //
      this.pageInfo.pageNo = 1
      this.getDataOfProject(value[1])
    }
  }
}
</script>
<style lang="scss">
.table-html-overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
